<template>
  <div class="city-management-container">
    <div class="left-menu">
      <el-menu :default-openeds="['2']" router>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>基础信息</span>
          </template>
          <el-submenu index="2">

            <template slot="title">城市管理</template>
            <el-menu-item index="/city-management/add">添加_城市</el-menu-item>
            <el-menu-item index="/city-management/edit">编辑_城市</el-menu-item>
          </el-submenu>
<!--          <el-menu-item index="1-1">城市管理</el-menu-item>-->
<!--          <el-menu-item index="/city-management/add">添加_城市</el-menu-item>-->
<!--          <el-menu-item index="/city-management/edit">编辑_城市</el-menu-item>-->

        </el-submenu>
      </el-menu>
    </div>
    <div class="main-content">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>基础信息</el-breadcrumb-item>
        <el-breadcrumb-item>城市管理</el-breadcrumb-item>
      </el-breadcrumb>
      <h2>城市管理</h2>
      <el-button type="primary" style="float: right" @click="goToAddCity">开通城市</el-button>
      <el-table :data="cityList" border>
        <el-table-column label="城市名称" prop="cityName"></el-table-column>
        <el-table-column label="高德地图ID" prop="gaodeId"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="更新人" prop="updater"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCity(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status === '服务中'" type="warning" size="mini" @click="pauseCity(scope.row)">暂停</el-button>
            <el-button v-else type="success" size="mini" @click="startCity(scope.row)">开启</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cityList: []
    };
  },
  created() {
    this.fetchCityList();
  },
  methods: {
    async fetchCityList() {
      try {
        const response = await axios.get('/api/cityList');
        if (response.data.success) {
          this.cityList = response.data.data;
        } else {
          this.$message.error('获取城市列表失败');
        }
      } catch (error) {
        console.error('获取城市列表失败', error);
        this.$message.error('获取城市列表失败，请检查网络或联系管理员');
      }
    },
    goToAddCity() {
      this.$router.push('/city-management/add');
    },
    async editCity(row) {
      console.log('编辑城市', row);
      // 这里可以实现跳转到编辑页面或弹出编辑窗口的逻辑
      // 假设编辑后提交到后端接口
      const updatedForm = {
        ...row,
        // 这里添加编辑后的数据
      };
      try {
        const response = await axios.post('/api/editCity', updatedForm);
        if (response.data.success) {
          this.$message.success('城市信息编辑成功');
          this.fetchCityList(); // 重新获取城市列表
        } else {
          this.$message.error('城市信息编辑失败');
        }
      } catch (error) {
        console.error('编辑城市失败', error);
        this.$message.error('城市信息编辑失败，请检查网络或联系管理员');
      }
    },
    async pauseCity(row) {
      console.log('暂停城市', row);
      try {
        const response = await axios.post('/api/pauseCity', { id: row.id }); // 假设后端接口需要城市ID
        if (response.data.success) {
          row.status = '暂停服务';
          this.$message.success('城市暂停成功');
        } else {
          this.$message.error('城市暂停失败');
        }
      } catch (error) {
        console.error('暂停城市失败', error);
        this.$message.error('城市暂停失败，请检查网络或联系管理员');
      }
    },
    async startCity(row) {
      console.log('开启城市', row);
      try {
        const response = await axios.post('/api/startCity', { id: row.id });
        if (response.data.success) {
          row.status = '服务中';
          this.$message.success('城市开启成功');
        } else {
          this.$message.error('城市开启失败');
        }
      } catch (error) {
        console.error('开启城市失败', error);
        this.$message.error('城市开启失败，请检查网络或联系管理员');
      }
    }
  }
};
</script>

<style scoped>
.city-management-container {
  display: flex;
}

.left-menu {
  width: 200px;
  background-color: #f4f4f4;
  height: 100vh;
}

.main-content {
  flex: 1;
  padding: 20px;
}
</style>